
import React,{ useMemo } from 'react'
import { Switch,BrowserRouter as Router,Route,Redirect } from 'react-router-dom'
import Login from './login'
import { connect } from 'react-redux'
import Loadable from 'react-loadable'
import NoRight from './common/noRight'
import NotFound from './common/NotFound'
import { message } from 'antd'
import Common from './common'

const loading = function() {
    return (
        <div>
            <h1>加载中。。。</h1>
        </div>
    )
}
function loadComponent(loader) {
    return Loadable({loader, loading})
}

function App({ token, rightsList, menuList }) {
    console.log(arguments)
    const pathList = [
        {"path":"/home","right":""},
        {"path":"/project/list","right":"R"},
        {"path":"/project/edit","right":"C"},
        {"path":"/purchase/list","right":"R"},
        {"path":"/purchase/edit","right":"C"},
        {"path":"/receiving/list","right":"R"},
        {"path":"/receiving/edit","right":"C"},
        {"path":"/user/list","right":"R"},
        {"path":"/user/edit","right":"C"},
        {"path":"/role","right":"R"},
        {"path":"/material","right":"R"},
        {"path":"/supplier","right":"R"}
    ]
    const routes = useMemo(function(){
        return pathList.map( it => {
            const MyComponent = loadComponent(() => import(`.${it.path}`))
            return <Route path={it.path} key={it.path}
                render={function({location}){
                    console.log(location);
                    let nowPath = pathList.find(item => item.path === location.pathname)
                    if(!nowPath.right){
                    // debugger;
                        return <MyComponent/>
                    }
                    const nowMenu=menuList.find(item => item.path === location.pathname)
                    const nowRight=rightsList.find(item => item.id === nowMenu.id)
                    if(!nowRight){
                        message.warn('您暂时没有访问此页面权限，若仍需访问，请联系管理员')
                        return <NoRight/>
                    }else{
                        if(nowRight.role.includes(nowPath.right)){
                            return <MyComponent/>
                        }else{
                            message.warn('您暂时没有访问此页面权限，若仍需访问，请联系管理员')
                            return <NoRight/>
                        }
                    }
                }}
            /> 
        })
    },[menuList,rightsList,token])
    
    return (
        <Router>
            <Common>
                <Switch>
                    <Route path='/login' component={Login}/>
                    <Route path='/404' component={ NotFound }/>
                    {
                        routes
                    }
                    <Redirect path='/' to='/login' exact/>
                    <Redirect to='/404'/>
                </Switch>
            </Common>
        </Router>
  )
}
export default connect(function(state){
    return {
        token: state.common.token,
        rightsList: state.common.userRight,
        menuList: state.menu.menuList
    }
})(App)
